<template>
	<view>
		<view class="bg-white flex flex-direction">
			<uni-forms ref="form" :modelValue="formData" :rules="rules" validateTrigger="bind">
				<uni-forms-item name="user" label="用户名" >
					<input v-model="formData.user" placeholder="请输入年龄" name="user" />
				</uni-forms-item>
				<uni-forms-item name="age" label="年龄" >
					<input v-model="formData.age" placeholder="请输入年龄" name="age" />
				</uni-forms-item>
			</uni-forms>
			<button class="cu-btn bg-blue" @click="submit">确定</button>
		</view>
		<view class="num" @click="mathRandom">
			{{ran}}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ran: 1234,
				formData: {
					user: '',
					age: '',
					code: '',
					pwd: ''

				},
				dynamicRules: {
					user:{
						rules: [{
							required: true,
							errorMessage: '请输入年龄'
						},{
							 format: 'number',
							 errorMessage: '年龄只能输入数字'
						},{
							minimum : 1 ,
							maximum : 100,
							errorMessage :'年龄范围{minimum}~{maximum}'
						},{
								validateFunction: function(rule, value, data, callback) {
															let iphoneReg = (
																/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
															); //
															if (!iphoneReg.test(value)) {
																callback('身份证格式不正确，请重新填写')
															}
														}
				
						}]
					}
				}
			}
		},
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.form.setRules(this.dynamicRules)
		},
		methods: {
			mathRandom() {
				this.ran = parseInt(Math.random() * 10000)
			},

			submit() {
				this.$refs.form.validate().then(res => {
					console.log('通过');
				}).catch(err => {
					console.log('不通过');
				})
			}
		}
	}
</script>

<style lang="scss">
	.num {
		width: 200rpx;
		height: 80rpx;
		background-color: beige;
		color: #c00;
		text-align: center;
		line-height: 80rpx;
		letter-spacing: 10px;
	}
</style>
